<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<style>
			.main {
				font-weight: 800;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 我们应该首选通过 CSS 类的方式来添加样式。仅当类“无法处理”时，才应选择使用 style 属性的方式。
		例如，如果我们动态地计算元素的坐标，并希望通过 JavaScript 来设置它们，那么使用 style 是可以接受的。 -->

		<div id="box" class="main page">DIV</div>

		<script>
			// 1. 对 className 进行赋值，会替换整个标签的 class 属性类名。
			console.log(document.body.firstElementChild.className) // main page

			// 2. classList 可以单个添加/删除 class 类名。
			for (const name of document.body.firstElementChild.classList) {
				console.log(name) // main page
			}

			// 3. elem.style.removeProperty('style property') 可以删除通过 style 设置的样式属性。
			document.querySelector('#box').style.color = 'red'
			setTimeout(() => {
				document.querySelector('#box').style.removeProperty('color')
			}, 1000)

			// 4. style.cssText 一次性设置多个 style 样式
			document.querySelector('#box').style.cssText = `
        color: red !important;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        text-align: center;`

			// 5. getComputedStyle(elem, [pseudo]) 读取给元素设置的CSS样式；pseudo表示伪元素，例如：::before，::after不设置此值表示元素本身。
			let boxCss = getComputedStyle(document.querySelector('#box'))
			console.log(boxCss.fontWeight) // 800
			console.log(boxCss.marginTop) // 100px
		</script>
	</body>
</html>
